.product {
    .content {
        .item-bg {
            background: url('/imgs/product/product-bg-1.png') no-repeat center;
            height: 718px;
            text-align: center;

            h2 {
                font-size: 80px;
                padding-top: 55px;
            }

            h3 {
                font-size: 24px;
                letter-spacing: 10px;
            }

            p {
                margin-top: 21px;
                margin-bottom: 40px;

                a {
                    font-size: 16px;
                    color: #333333;
                }

                span {
                    margin: 0 15px;
                }
            }

            .price {
                font-size: 30px;
                color: #333333;

                em {
                    font-style: normal;
                    font-size: 38px;
                }
            }
        }

        .item-bg-2 {
            background: url(/imgs/product/product-bg-2.png) no-repeat center;
            height: 480px;
            background-size: 1226px 397px;
        }

        .item-bg-3 {
            background: url(/imgs/product/product-bg-3.png) no-repeat center;
            height: 638px;
            background-size: cover;
        }

        .swiper-wrapper {
            display: flex;
        }

        .swiper-container {
            width: 100%;
            overflow: hidden;
            display: flex;
        }

        .item-swiper {
            margin: 36px auto 52px;

            .desc {
                font-size: 18px;
                color: #333333;
                text-align: center;
            }

            img {
                width: 100%;
            }
        }

        .item-video {
            height: 1044px;
            background-color: #070708;
            margin-bottom: 76px;
            color: #FFFFFF;
            text-align: center;

            h2 {
                font-size: 60px;
                padding-top: 82px;
                margin-bottom: 47px;
            }

            p {
                font-size: 24px;
                margin-bottom: 58px;
            }

            .video-bg {
                background: url('/imgs/product/gallery-1.png') no-repeat center;
                background-size: cover;
                width: 1226px;
                height: 540px;
                margin: 0 auto 120px;
                cursor: pointer;
            }

            .video-box {
                .overlay {
                    @include position(fixed);
                    background-color: #333333;
                    opacity: .4;
                    // z-index:10;
                }

                @keyframes slideDown {
                    from {
                        top: -50%;
                        opacity: 0;
                    }

                    to {
                        top: 50%;
                        opacity: 1;
                    }
                }

                @keyframes slideUp {
                    from {
                        top: 50%;
                        opacity: 1;
                    }

                    to {
                        top: -50%;
                        opacity: 0;
                    }
                }

                .video {
                    position: fixed;
                    top: -50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    z-index: 10;
                    width: 1200px;
                    height: 800px;

                    // opacity:1;
                    &.slideDown {
                        animation: slideDown .6s linear;
                        top: 50%;
                    }

                    &.slideUp {
                        animation: slideUp .6s linear;
                    }

                    .icon-close {
                        position: absolute;
                        top: 20px;
                        right: 20px;
                        @include bgImg(20px, 20px, '/imgs/icon-close.png');
                        cursor: pointer;
                        z-index: 11;
                        transition: transform .3s;

                        &:hover {
                            transform: rotate((90deg)) scale(1.2);
                        }
                    }

                    video {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        outline: none;
                    }
                }
            }
        }
    }

    button {
        margin-left: 10px;
    }
}